<!DOCTYPE html>
<html>


<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">


	<title>角色管理</title>
	<meta name="keywords" content="">
	<meta name="description" content="">

	<link rel="shortcut icon" href="${ctx}/favicon.ico">
	<link href="${ctx}/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
	<link href="${ctx}/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

	<!-- Data Tables -->
	<link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
	<link href="${ctx}/css/plugins/iCheck/custom.css" rel="stylesheet">
	<link href="${ctx}/css/animate.min.css" rel="stylesheet">
	<link href="${ctx}/css/style.min862f.css?v=4.1.0" rel="stylesheet">
	<link href="${ctx}/css/plugins/datapicker/datepicker3.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-content">
					<div>
                        <span>
                            <button onclick="role_add()" class="btn btn-primary">
                                <i class="glyphicon glyphicon-plus"></i>&nbsp;添加角色
                            </button>
                        </span>
					</div>
					<table class="table table-striped table-bordered table-hover dataTables-example text-center">
						<thead>
						<tr>
							<th class="text-center">角色名称</th>
							<th class="text-center">描述</th>
							<th class="text-center">操作</th>
						</tr>
						</thead>
						<tbody id="list">
                        <#list roleList as role >
						<tr class="gradeX">
							<td>${role.title}
							</td>
							<td class="center">${role.description}</td>
							<td class="center">
								<a title="编辑" href="javascript:;"  onclick="role_edit('${role.id}')"
								   style="text-decoration:none"><i class="glyphicon glyphicon-pencil"></i> </a>&nbsp;&nbsp;
								<a title="删除" href="javascript:; " onclick="role_del(this,'${role.id}')"
								   style="text-decoration:none"><i class="glyphicon glyphicon-trash"></i> </a>
							</td>
						</tr>
                        </#list>
						</tbody>
					</table>

				</div>
			</div>
		</div>
	</div>

</div>
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx}/js/plugins/dataTables/jquery.dataTables.min.js"></script>
<script src="${ctx}/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="${ctx}/js/plugins/iCheck/icheck.min.js"></script>
<script src="${ctx}/js/plugins/layer/layer.js"></script>
<script>
	$('.dataTables-example').dataTable({
		"bStateSave": true, //状态保存
		"bLengthChange": false,
		"bFilter": false,
		"bSort": false,
		"iDisplayLength": 7,
		"aoColumnDefs": [
			{
				"orderable": false,
				"aTargets": [0]
			}
		]
	});
	$(document).ready(function () {
		$(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green",})
	});

	/*增加角色*/
	function role_add() {
		layer.open({
			title: '添加角色',
			type: 2,
			area: ['800px', '500px'],
			shadeClose: true, //点击遮罩关闭
			content: '${ctx}/role/roleAddPage'
		});
	}
    /*删除角色*/
	function role_del(obj,paperId){
		layer.confirm('确认要删除角色吗？', function (index) {
			$.ajax({
				url: "${ctx}/role/delete/"+paperId,
				type: "POST",
				dataType: "json",
				success: function (data) {
					var result = data.status;
					if (result == "1000") {
						layer.alert('删除成功!', {
							icon: 1,
							skin: 'layer-ext-moon'
						})
						$(obj).parents("tr").remove();
					} else if(result=="1001"){
						layer.alert('当前角色下存在用户，无法删除!', {
							icon: 3,
							skin: 'layer-ext-moon'
						})
                    } else{
						layer.alert('删除失败!', {
							icon: 2,
							skin: 'layer-ext-moon'
						})
					}
				}
			});
		})

    }

	/*编辑角色*/
	function role_edit(roleId) {
		layer.open({
			title: '编辑角色',
			type: 2,
			area: ['800px', '500px'],
			shadeClose: true, //点击遮罩关闭
			content: '${ctx}/role/update?roleId='+roleId
		})
	}
</script>

</body>


</html>
